/**
 * 编辑讲师的组件中
 * 根据tc_id获取讲师数据
 */
import React from 'react'
import  './TecEdit.css'
import axios from 'axios'

export default class TecEdit extends React.Component{
  constructor(){
    super()
    this.state = {
      tec:{}
    }
  }
  componentWillMount(){
    // http://api.botue.com/teacher/edit
    // 获取讲师的详细信息
    // <Route path="/TecEdit/:id"   component={TecEdit}></Route>
    console.log(this)
    axios.get('/api/teacher/edit?tc_id='+ this.props.match.params.id)
    .then((res) => {
      // result里才是讲师的信息
        this.state.tec = res.data.result
        // 把id保存
        this.state.tec.tc_id = this.props.match.params.id
        this.setState({})
    })
  }
  render(){
    const str = 'checked'
    return(
      <div className="body teacher">
        <ol className="breadcrumb">
          <li><a href="javascript:;">讲师管理</a></li>
          <li className="active">讲师添加</li>
        </ol>
        <div className="teacher-add">
          <form action="" className="form-horizontal col-md-offset-2">
            <div className="form-group">
              <label htmlFor="" className="col-md-3 control-label">姓名</label>
              <div className="col-md-4">
                <input
                onChange={
                  (e) =>{
                    console.log(e.target.value)
                    this.state.tec.tc_name = e.target.value
                    this.setState({})
                    // console.log(e.target.value)
                  }
                }
                value={this.state.tec.tc_name}
                type="text" className="form-control input-sm" placeholder="讲师名称" />
          
              </div>
            </div>
            <div className="form-group">
              <label htmlFor="" className="col-md-3 control-label">入职时间</label>
              <div className="col-md-4">
                <input
                onChange={
                  (e) =>{
                    this.state.tec.tc_join_date = e.target.value
                    this.setState({})
                    // console.log(e.target.value)
                  }
                }
                value={this.state.tec.tc_join_date}
                 type="text" className="form-control input-sm" />
              </div>
            </div>
            <div className="form-group">
              <label htmlFor="" className="col-md-3 control-label">类型</label>
              <div className="col-md-2">
                {
                  // select的valuve是与option的value保持一致!
                }
                <select
                onChange={
                  (e) =>{
                    this.state.tec.tc_type = e.target.value
                    this.setState({})
                    console.log(e.target.value)
                  }
                }
                value={this.state.tec.tc_type}
                 name="" className="form-control input-sm">
                  <option value="1">讲师</option>
                  <option value="0">管理员</option>
                </select>
              </div>
            </div>
            <div className="form-group">
              <label htmlFor="" className="col-md-3 control-label">性别</label>
              <div className="col-md-4">
                
                {this.getInput(0)}
                {this.getInput(1)}
                
              </div>
            </div>
            <div className="form-group">
              <div className="col-md-7">
                <button 
                onClick={this.save.bind(this)}
                className="btn btn-success btn-sm pull-right"> 保 存 </button>
              </div>              
            </div>
          </form>
        </div>
      </div>)
  }

  // get input

  // 这个方法最终要返回input,是已经添加了checked属性的input
  getInput(num){
   // this.state.tec.tc_gender
   if(this.state.tec.tc_gender == num){

    // 这里也必需是个单标签!
    // 不仅仅是这里return 即使是把一个标签赋值给对象
    // 也要是单标签的形式!
    return (
      <label className="radio-inline">
          <input
          onChange={
                    (e) =>{
                      this.state.tec.tc_gender = num
                      this.setState({})
                    }
                  }
        name="gender" type="radio" checked  value={num} />
        {num == 0?'男':'女'}
      </label>
      )
   }else{
     return(
      <label className="radio-inline">
                  <input
                  onChange={
                    (e) =>{
                      this.state.tec.tc_gender = num
                      this.setState({})
                    }
                  }
        name="gender" type="radio"  value={num} />
        {num == 0?'男':'女'}
      </label>
      )
   }
  }

  // 把修改后的数据保存!
  save(e){
    // 阻止默认事件
    e.preventDefault()
    // xhr.send('这里随便写什么') // a=1&b=2
    // {"a":1}
   // http://api.botue.com/teacher/update
   axios.post('/api/teacher/update',
    this.parse(this.state.tec),

    // 告诉后端我们的数据是有&符号格式
    {'Content-Type':'application/x-www-form-urlencoded '}
    )
  }
  // 把json对象转换为 form格式的字符串!
  parse(obj){
   let str = ''
   for(let key in obj){
    // 多了一个&是没有关系的!
    str += key+'='+ obj[key] + '&'
   }
   return str
  }
}